import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

const Countdown = ({ active, remainingTime, totalDuration }) => {
  const formatTime = (seconds) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
  };

  return (
    <div className="countdown">
      <div className="countdown-timer">
        {active ? (
          formatTime(remainingTime)
        ) : (
          formatTime(totalDuration)
        )}
      </div>
    </div>
  );
};

Countdown.propTypes = {
  active: PropTypes.bool.isRequired,
  remainingTime: PropTypes.number.isRequired,
  totalDuration: PropTypes.number.isRequired
};

const mapStateToProps = (state) => ({
  active: state.room.countdown.active,
  remainingTime: state.room.countdown.remainingTime,
  totalDuration: state.room.countdown.totalDuration
});

export default connect(mapStateToProps)(Countdown); 
